<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2022-12-29 21:54:27
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-28 16:31:43
-->
<template>
  <x-page>
    <el-row style="flex: 1" :gutter="10">
      <el-col :span="8" style="height: 100%">
        <el-card class="user-profile-info">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <user-avatar :user="user" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <!-- <svg-icon icon-class="user" /> -->
                <!-- <em class="iconfont icon-wode1"></em> -->
                用户姓名
                <div class="pull-right">
                  {{ user.username }}
                </div>
              </li>
              <li class="list-group-item">
                <!-- <svg-icon icon-class="phone" /> -->
                <!-- <em class="iconfont "></em> -->
                真实姓名
                <div class="pull-right">
                  {{ user.realName }}
                </div>
              </li>
              <li class="list-group-item">
                <!-- <svg-icon icon-class="tree" /> -->

                工号
                <div class="pull-right">
                  {{ user.employeeId }}
                </div>
              </li>
              <li class="list-group-item">
                <!-- <svg-icon icon-class="email" /> -->
                邮箱
                <div class="pull-right">
                  {{ user.email }}
                </div>
              </li>
              <li class="list-group-item">
                <!-- <svg-icon icon-class="peoples" /> -->
                在职状态
                <div class="pull-right">
                  {{ getDictLabel(dictOptions['upms_user.work_status'] || [], user.workStatus) }}
                </div>
              </li>
              <li class="list-group-item">
                <!-- <svg-icon icon-class="date" /> -->
                创建时间
                <div class="pull-right">
                  {{ user.createTime }}
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" style="height: 100%">
        <el-card class="user-base-info">
          <!-- <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div> -->
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <user-base-info :user="user" :dictOptions="dictOptions" @handleSuccess="getInfo" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd" v-hasPermi="['srm:userInfo:resetPwd']">
              <el-form
                :model="ruleForm"
                class="demo-form-inline"
                ref="ruleForm"
                :rules="rules"
                label-width="100px"
                label-position="top"
              >
                <el-form-item :label="$t('system.user.newPassword')" prop="newPassword">
                  <el-input
                    v-model="ruleForm.newPassword"
                    show-password
                    :placeholder="$t('system.user.passwordTxt')"
                    type="password"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('system.user.confirm')" prop="checkPass">
                  <el-input
                    v-model="ruleForm.checkPass"
                    :placeholder="$t('system.user.confirmTxt')"
                    type="password"
                    show-password
                  >
                  </el-input>
                </el-form-item>
                <!-- <el-form-item> -->
                <el-button @click="handleCancel" v-hasPermi="['srm:userInfo:edit']">
                  {{ $t('common.cancel') }}
                </el-button>
                <el-button type="primary" @click="handleSubmit" v-hasPermi="['srm:userInfo:edit']">
                  {{ $t('common.confirm') }}
                </el-button>
                <!-- </el-form-item> -->
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </x-page>
</template>
<script>
  import { mapState, mapActions } from 'pinia'
  import { encrypt, selectDictLabel } from '@package/utils'
  import { QueryDictMixin } from '@/common/mixins'
  import { pinias } from '@/common/pinia'
  import { checkPwd } from '@/common/utils/validate.js'
  import UserAvatar from './userAvatar.vue'
  import UserBaseInfo from './userBaseInfo.vue'
  import { apiPutChangePwd } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum'

  const { login } = pinias
  export default {
    name: 'UserProfile',
    components: { UserAvatar, UserBaseInfo },
    mixins: [QueryDictMixin],
    data() {
      return {
        activeTab: 'userinfo',
        ruleForm: {
          newPassword: '',
          checkPass: '',
          userId: ''
        },
        dictKeys: [
          'upms_user.online_status',
          'upms_user.work_status',
          'upms_user.gender',
          'system.state',
          'upms_user.user_type'
        ],
        rules: {
          newPassword: [
            { required: true, message: this.$t('system.user.passwordTxt'), trigger: 'blur' },
            { min: 0, max: 20, message: this.$t('system.user.pwdLengthPlaceholder'), trigger: 'blur' },
            { validator: this.validatePwd, trigger: 'blur' }
          ],
          checkPass: [
            { required: true, message: this.$t('system.user.confirm'), trigger: 'blur' },
            { min: 0, max: 20, message: this.$t('system.user.pwdLengthPlaceholder'), trigger: 'blur' },
            { validator: this.validatePwd2, trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      ...mapState(login, ['user'])
    },
    mounted() {
      this.initDictConfig()
      this.getInfo()
    },
    methods: {
      ...mapActions(login, ['getInfo']),
      getDictLabel(list, value) {
        return selectDictLabel(list, value)
      },
      handleCancel() {
        this.ruleForm = {
          newPassword: '',
          checkPass: '',
          userId: ''
        }
      },
      handleSubmit() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            const formData = new FormData()
            formData.append('password', encrypt(this.ruleForm.newPassword))
            // const param = {
            //   password: encrypt(this.ruleForm.newPassword)
            // }
            apiPutChangePwd(formData).then(
              ({ code, msg }) => {
                this.loading = false
                if (code === EnumApiCode.Success) {
                  this.$refs.ruleForm.resetFields()
                  this.$message.success(this.$t('system.user.resetSuccess'))
                } else {
                  this.$message.error(msg)
                }
              },
              () => {}
            )
          } else {
            return false
          }
        })
      },
      validatePwd(rule, value, callback) {
        if (value && value !== '' && !checkPwd(value)) {
          callback(new Error(this.$t('system.user.PasswordMode')))
        } else {
          callback()
        }
      },
      validatePwd2(rule, value, callback) {
        if (value && value !== '' && value !== this.ruleForm.newPassword) {
          callback(new Error(this.$t('system.user.confirPwdTips')))
        } else {
          callback()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .user-profile-info {
    height: 100%;
  }

  .user-base-info {
    height: 100%;
  }

  .list-group-striped > .list-group-item {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .list-group {
    padding-left: 0;
    list-style: none;
  }

  .list-group-item {
    font-size: 13px;
    margin-bottom: -1px;
    padding: 11px 0;
    border-top: 1px solid #e7eaec;
    border-bottom: 1px solid #e7eaec;
  }

  .pull-right {
    float: right !important;
  }
  .text-center {
    margin-bottom: 16px;
  }
  .user-base-info ::v-deep .el-card__body {
    padding: 14px 20px 20px 20px;
  }
</style>
